<template>
	<view>
		<view>
			
		</view>
		<view style="height: 94.5rpx;width: 750rpx;background: #FFFFFF;padding: 30.2rpx;display: flex;justify-content: space-between;align-items: center;font-size: 30.2rpx;color: #3A3A3A;font-weight: bold;box-sizing: border-box;margin-top: 10rpx;">
			<!-- 日期封装 -->
			<view style="display: flex;align-items: center;">
				<view class="uni-list-cell-db">
				    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				        <view class="uni-input">{{date}}</view>
				    </picker>
				</view>
				<view style="margin-left: 5rpx;">
					<image src="../../../static/newshouye/xiala.png" style="width: 21.14rpx;height: 12rpx;"></image>
				</view>
			</view>
			<view>{{week}}</view>
		</view>
		<view style="height:143.1rpx;width: 750rpx;background: #FFFFFF;display: flex;padding: 15rpx 40rpx;box-sizing: border-box;margin-top: 10rpx;">
			<scroll-view scroll-x="true" class="kite-classify-scroll" show-scrollbar :scroll-left="listt">
				<view class="kite-classify-cell" v-for="(itme,index) in arr" :key="index">
					<view style="display: flex;align-items: center;flex-direction: column;" @tap="add(index,itme)">
						<view>{{itme.week}}</view>
						<view style="height: 55.57rpx;width:55.57rpx ;border-radius: 50%;text-align: center;line-height:55.57rpx;margin-top: 5rpx;" 
						:class="shu == index?'list':itme.bur?'cl':'' ">{{itme.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="margin-bottom: 300rpx;width: 750rpx;background: #FFFFFF;display: flex;padding: 15rpx 20rpx;box-sizing: border-box;margin-top: 10rpx;">
			<scroll-view scroll-x="true" class="kite-classify-scroll_"  :scroll-left="listt_">
				<view>
					<view style="display: flex;padding: 0;margin: 0;">
						<view style="min-height: 172rpx;width: 160rpx;display: flex;align-items: center;justify-content: center;border:0.8rpx solid #FF7300;border-bottom: none;">
							<view style="font-size:32.58rpx ;color: #EE7B30;font-weight:bold ;width: 160rpx;text-align: center;">上午</view>
						</view>
						<view v-if="num_ != 2">
							<view style="display: flex;"  v-for="(itme,index) in shangwu_" :key="index">
								<view v-for="(itmes,indexs) in itme" :key="indexs" style="height: 210rpx;width: 320rpx;border: 0.8rpx solid #FF7300;border-left: none;border-bottom: none;font-size: 25.74rpx;color: #2F2F2F;padding: 10rpx 14.5rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;box-sizing: border-box;">
									<view>
										<text style="font-size: 32.58rpx;font-weight: bold;margin-right: 21.744rpx; ">{{itmes.duan}}</text>
										<text style="margin-left:25.744rpx ;color: #EE7B30;white-space:wrap;overflow:hidden;text-overflow:ellipsis;">{{itmes.map.masterInfo.nick_name}}</text>
									</view>
									<view style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color: #EE7B30;">{{itmes.title}}</view>
									<view v-if="itmes.classroom != ''">上课教室:</view>
									<view style="white-space:wrap;overflow:hidden;text-overflow:ellipsis;" v-if="itmes.classroom != ''">{{itmes.classroom}}</view>
									<view style="width: 172.14rpx;height: 35.64rpx;text-align: center;line-height: 35.64rpx;border: 0.6rpx solid #EE7B30;font-size: 21.74rpx;color: #EE7B30;border-radius: 6rpx;margin-top: 6rpx;" v-if="itmes.title" @tap.stop="yuyue_kecheng(itmes)">{{itmes.yue}}</view>
								</view>
							</view>
						</view>
						<view style="display: flex;" v-if="num_ == 2">
							<view v-for="(itme,index) in arrr" :key="index" style="height: 220rpx;min-width: 320rpx;border: 0.8rpx solid #FF7300;border-left: none;border-bottom: none;box-sizing: border-box;"></view>
						</view>
					</view>
					<view style="display: flex;padding: 0;margin: 0;">
						<view style="min-height: 190rpx;width: 160rpx;display: flex;align-items: center;justify-content: center;border:0.8rpx solid #FF7300; ">
							<view style="font-size:32.58rpx ;color: #EE7B30;font-weight:bold ;width: 160rpx;text-align: center;">下午</view>
						</view>
						<view>
							<view v-if="num != 2">
								<view style="display: flex;"  v-for="(itme,index) in xiawu_" :key="index">
									<view v-for="(itmes,indexs) in itme" :key="indexs" style="height: 220rpx;min-width: 320rpx;border: 0.8rpx solid #FF7300;border-left: none;font-size: 25.74rpx;color: #2F2F2F;padding: 15rpx 14.5rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;box-sizing: border-box;">
										<view>
											<text style="font-size: 32.58rpx;font-weight: bold;margin-right: 21.744rpx;">{{itmes.duan}}</text>
											<text style="margin-left:25.744rpx ; color: #EE7B30;white-space:wrap;overflow:hidden;text-overflow:ellipsis;">{{itmes.map.masterInfo != 'null' ? itmes.map.masterInfo.nick_name : ''}}</text>
										</view>
										<view style="color: #EE7B30;">{{itmes.title}}</view>
										<view style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 200rpx;text-align: center;"  v-if="itmes.classroom != ''">上课教室:{{itmes.classroom}}</view>
										<view style="width: 172.14rpx;height: 35.64rpx;text-align: center;line-height: 35.64rpx;border: 0.6rpx solid #EE7B30;font-size: 21.74rpx;color: #EE7B30;border-radius: 6rpx;margin-top: 6rpx;" v-if="itmes.title" @tap.stop="yuyue_kecheng(itmes)">{{itmes.yue}}</view>
									</view>
								</view>
							</view>
							<view style="display: flex;" v-if="num == 2">
								<view v-for="(itme,index) in arrr" :key="index" style="height: 220rpx;width: 320rpx;border: 1rpx solid #FF7300;border-left: none;box-sizing: border-box;"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				list_num:0,
				arr:[],
				shu:100,
				listt:"200px",
				dang:"",
				week:"",
				index: 0,
				date: currentDate,
				arrr:[12,1,1],
				shuju:[],
				user_list:{},
				mechanism_id:"",
				shangwu:[],
				xiawu:[],
				num:"",
				num_:"",
				shangwu_:[],
				xiawu_:[],
				kejie_shu: "",
				title:"",
				appointment_id: "",
				classroom: "",
				study_card_id:""
			}
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		methods:{
				yuyue_kecheng(itmes){
				if(itmes.yue == "可预约"){
					let me = this
					me.appointment_id = itmes.id
					me.classroom = itmes.classroom
					uni.showModal({
					    title: '预约课程',
					    content: '是否预约课程',
					    success:(res) => {
					        if (res.confirm) {
								me.kechengyuyue(itmes)
					        } else if (res.cancel) {
					           uni.showToast({
					           	    title:"已取消"
					           })
					        }
					    }
					});
					
				}else{
					uni.showToast({
						title:"课程已结束",
						icon:"none"
					})
				}
			},
		async	kechengyuyue(index){
				let me = this
				const res = await me.$myRequest({
					url:"/userAppointment/insert",
					methed: "post",
					data:{
						user_id: me.user_list.user_id,
						appointment_id:  index.id,
						study_card_id: me.study_card_id,
						title: me.title,
						classroom: me.classroom,
						whether: "true",
						number_of_lessons: me.kejie_shu.toString(),
						source: "wx",
					},
					header:{
						'content-type':'application/json' 
					}
				})
				if(res.code == 0){
					uni.showToast({
						title:"预约成功"
					})
					uni.reLaunch({
						url:"/pages/tabBer/newsshouye/newsshouye?num=3"
					})
				}
			},
		async	shuju_() {
			    this.shangwu = []
			    this.xiawu = []
				const res = await this.$myRequest({
					url:"/masterAppointment/queryMechanismOfflineSchedule",
					method:"get",
					data:{
						mechanism_id:this.mechanism_id,
						type:"mechanism_offline",
						start_time:this.date + " " + "00:00:00",
						end_time:this.date + " " + "23:59:59",
						offset:8,
						identity_type:"teach_paypal_course",
						create_type:"appointment",
						master_set_price_id: this.zhujian_id,
					},
					header:{
						'content-type':'application/json' 
					}
				})
				let a = [1,1,1,1,1,11,12]
				let ddd = 0
				let d = []
				for(let i=0;i<2;i++){
					d.push(a.slice(ddd,ddd+3))
					ddd+=3
				}
				let b = a.length - (3*2)
				if(res.code == 0){
					if(res.data.length == 0){
						this.shangwu = []
						this.xiawu = []
						this.num = 2
						this.num_ = 2
					}else{
						let zhongwu = (this.date + " " + "12:00:00").replace(/\-/g,"/")
						// 上午
						let sw = [] 
						// 下午
						let xw = []
						res.data.forEach((itme) => {
							if(itme.status == 1){
								itme.yue = "可预约"
							}else{
								itme.yue = "已结束"
							}
							itme.duan = itme.start_time.substring(11,16)
							if(this.shijianchuo(itme.start_time.replace(/\-/g,"/")) < this.shijianchuo(zhongwu)){
								sw.push(itme)
							}else{
								xw.push(itme)
							}
						})
						let d ={
							title:"",
							duan:"",
							classroom:"",
							yue:"",
							map:{
								masterInfo:{
									nick_name:""
								}
							}
						}
						// 上午的返回值
						if(sw.length == 0){
							this.num_ = 2
						}else{
							sw = sw.reverse()
							this.num_ = 3
							if(sw.length < 3){
								let b = 3 - sw.length
								for(let i=0;i<b;i++){
									sw.push(d)
								}
								this.shangwu.push(sw)
							}else if(sw.length == 3){
								this.shangwu.push(sw)
							}else if(sw.length > 3){
								if(sw.length%3 == 0){
									let a_ = sw.length/3
									let k = 0
									let ds = []
									for(let shi=0;shi<a_;shi++){
										ds.push(sw.slice(k,k+3))
										k+=3
									}
									this.shangwu = ds
								}else{
									let b_ =  Math.floor(sw.length/3)
									let k_ = 0
									let ds = []
									for(let shi=0;shi<b_;shi++){
										ds.push(sw.slice(k_,k_+3))
										k_+=3
									}
									let c = sw.length - 3*b_
									let ll = sw.slice(3*b_)
									let x_ = 3 - ll.length
									for(let bb=0;bb<x_;bb++){
										ll.push(d)
									}
									ds.push(ll)
									this.shangwu = ds
								}
							}
							this.shangwu_ = this.shangwu
						}
						// 下午的返回值
						if(xw.length == 0){
							this.num = 2
						}else{
							xw = xw.reverse()
							this.num = 3
							if(xw.length < 3){
								let b = 3 - xw.length
								for(let i=0;i<b;i++){
									xw.push(d)
								}
								this.xiawu.push(xw)
							}else{
								if(xw.length == 3){
									let ccc = []
									ccc.push(xw)
									this.xiawu = ccc
								}else if(xw.length > 3){
									if(xw.length%3 == 0){
										let a_ = xw.length/3
										let k = 0
										let ds = []
										for(let shi=0;shi<a_;shi++){
											ds.push(xw.slice(k,k+3))
											k+=3
										}
										this.xiawu = ds
									}else{
										let b_ =  Math.floor(xw.length/3)
										let k_ = 0
										let ds = []
										for(let shi=0;shi<b_;shi++){
											ds.push(xw.slice(k_,k_+3))
											k_+=3
										}
										let c = xw.length - 3*b_
										let ll = xw.slice(3*b_)
										let x_ = 3 - ll.length
										for(let bb=0;bb<x_;bb++){
											ll.push(d)
										}
										ds.push(ll)
										this.xiawu = ds
									}
								}
							}
							 this.xiawu_ = this.xiawu
						}
					}
				}
			},
			add(index,itme){
				this.shu = index
				this.date = itme.xin
				this.week =  "周" + itme.week
				this.shuju_()
			},
			huanke(index){
				this.list_num = index
			},
			shijianchuo(index){
				return new Date(index).getTime()
			},
			yuefeng(index){
				let zhi = index?index:(new Date().getTime())
				let dd = new Date(index)
				let nian = dd.getFullYear()
				let yue = dd.getMonth() + 1 < 10 ? "0" +  (dd.getMonth() + 1)  : dd.getMonth() + 1
				let ri = dd.getDate() < 10 ? "0" +  dd.getDate() :  dd.getDate()
				this.dang = nian + "-" + yue + "-" + ri
				let ll = dd.getDay()
				let d = ""
				if(ll == 1){
					d = "周一"
				}else if(ll == 2){
					d = "周二"
				}else if(ll == 3){
					d = "周三"
				}else if(ll == 4){
					d = "周四"
				}else if(ll == 5){
					d = "周五"
				}else if(ll == 6){
					d = "周六"
				}else{
					d = "周日"
				}
				this.week = d
				return nian + "-" + yue + "-" + ri
			},
			dangqian(indexl) {
				let zhi = indexl?indexl:(new Date().getTime())
				let d_ = new Date(zhi).getTime()
				let dd = new Date(d_)
				let nian = dd.getFullYear()
				let yue = dd.getMonth() + 1 < 10 ? "0" +  (dd.getMonth() + 1)  : dd.getMonth() + 1
				let ri = dd.getDate() < 10 ? "0" +  dd.getDate() :  dd.getDate()
				let ri_ = dd.getDate()
				this.listt = ((ri_ + 9) * 50) + "rpx"
				let a = new Date(nian, yue,0).getDate()
				let riqi=[]
				let d = ""
				let xin = ""
				for(let i =1;i <= a ;i++){
					let kK = d_ - ((ri-i)*24*60*60*1000)
					let guolv = new Date(kK)
					let l = guolv.getDate()
					let ll = guolv.getDay()
					let hun = guolv.getFullYear()
					xin = this.yuefeng(kK)
					if(ll == 1){
						d = "一"
					}else if(ll == 2){
						d = "二"
					}else if(ll == 3){
						d = "三"
					}else if(ll == 4){
						d = "四"
					}else if(ll == 5){
						d = "五"
					}else if(ll == 6){
						d = "六"
					}else{
						d = "日"
					}
					let dd = {}
					dd.name = l
					dd.week = d
					dd.xin = xin
					dd.bur = false
					riqi.push(dd)
				}
				this.arr = riqi
				riqi.forEach((itme) => {
					let ddd = this.yuefeng(new Date().getTime())
					if(itme.xin == ddd){
						itme.bur = true
					}
				})
			},
			bindDateChange(e) {
			    this.date = e.target.value
				let we = new Date(this.date).getTime()
				let wee = new Date(we)
				let ll = wee.getDay()
				let d = ""
				if(ll == 1){
					d = "周一"
				}else if(ll == 2){
					d = "周二"
				}else if(ll == 3){
					d = "周三"
				}else if(ll == 4){
					d = "周四"
				}else if(ll == 5){
					d = "周五"
				}else if(ll == 6){
					d = "周六"
				}else{
					d = "周日"
				}
				this.dangqian(this.date)
				this.week = d
				this.shu = wee.getDate() - 1
				this.shuju_()
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
		},
		onLoad(option) {
			const data = JSON.parse(decodeURIComponent(option.num))
			this.mechanism_id = data.mechanism_id
			this.kejie_shu = data.num
			this.title = data.title
			this.zhujian_id = data.shangping_id
			this.study_card_id = data.shang_id
			try{
				this.user_list = uni.getStorageSync('userif_list')
			}catch(e){}
			this.yuefeng()
			this.dangqian()
			this.shuju_()
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.inp{
		display: flex;
		overflow: hidden;
		white-space: nowrap;
	}
	.list{
		color: #FFFFFF;
		background: #FF7300;
	}
	.cl{
		background: #FFCCA2;
		color: #FF7300;
	}
	.kite-classify-scroll{
		display: flex;
		align-items: center;
	    width: 100%;
		height:120rpx;;
		overflow: hidden;
	 	white-space: nowrap;
		margin: 0;
		padding: 0;
	}
	
	.kite-classify-cell{
		display: inline-block;
		width: 95rpx;
		height:120rpx;
		font-size: 26rpx;
		color: #FF7300;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	.qw{
		position: absolute;
		top: 10rpx;
		z-index: 123455;
		background: #007AFF;
	}
	.kite-classify-scroll_{
		display: flex;
		align-items: center;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin: 0;
		padding: 0;
	}
</style>
